<script setup lang="ts">
interface Props {
  /** 按钮类型 */
  type?: 'primary' | 'secondary' | 'none' | 'default'
  /** 加载状态 */
  loading?: boolean
  /** 禁用状态 */
  disabled?: boolean
  htmlType?: 'submit' | 'button' | 'reset'
}

defineOptions({ name: 'BaseButton' })

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  htmlType: 'button',
})

const emit = defineEmits<{
  /** 点击事件 */
  (e: 'click', event: MouseEvent): void
}>()

function handleClick(event: MouseEvent) {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<template>
  <button class="text-base button font-semibold" :type="htmlType" :class="[type]" :disabled="disabled"
    @click="handleClick">
    <!-- TODO -->
    <BaseIcon v-if="loading" name="uni-dice" class="ani-roll"/>
    <slot v-else class="content"/>
  </button>
</template>

<style lang="scss" scoped>
@layer base {
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
    height: 2.5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    &:active:not(:disabled) {
      transform: translateY(1px);
      --tw-brightness: brightness(.95);
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    &:disabled {
      opacity: 0.4;
    }
  }

  .primary {
    color: #000;
    background-image: linear-gradient(90deg, #24ee89, #9fe871);
    box-shadow:
      0 0 12px #23ee884d,
      0 -2px #1dca6a inset;
  }

  .secondary {
    color: #fff;
    border-radius: 8px;
    background: var(--color-bg-black-6);
  }
}

// 按钮loading动画
.ani-roll {
  transform-origin: center;
  animation-name: tg-roll;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear
}

@keyframes tg-roll {

  0%,
  5% {
    transform: rotate(0) translate(0)
  }

  15% {
    transform: rotate(45deg) translate(-10%, -10%)
  }

  20%,
  30% {
    transform: rotate(90deg) translate(0)
  }

  37.5% {
    transform: rotate(135deg) translate(-10%, 10%)
  }

  45%,
  55% {
    transform: rotate(180deg) translate(0)
  }

  62.5% {
    transform: rotate(225deg) translate(10%, 10%)
  }

  70%,
  80% {
    transform: rotate(270deg) translate(0)
  }

  87.5% {
    transform: rotate(315deg) translate(10%, -10%)
  }

  95%,
  to {
    transform: rotate(360deg) translate(0)
  }
}
</style>
